<!--页面 -->
<template>
	<view class="contact">
		<image class="loginbg" :src="apifun.serveimg+'loginbg.png'" mode=""></image>
		<view class="topblock">
			<view :style="{ height: statusheadheight + 'px' }"></view>
			<view class="topmain">
				<image class="logo" src="../../static/logo.png" mode=""></image>
				<view class="companyname">安阳中盈化肥有限公司</view>
				<view class="idetype flex marginAuto">
					<view class="ideeach" @click="idetypefun(1)" :class="idetype == 1 ? 'mainColor':''">普通用户<text class="x mainBg" v-if="idetype == 1"></text></view>
					<view class="ideeach" @click="idetypefun(2)" :class="idetype == 2 ? 'mainColor':''">审核员<text class="x mainBg" v-if="idetype == 2"></text></view>
				</view>
			</view>
		</view>
		<view class="logintype flex marginAuto">
			<view class="ideeach" @click="logintypefun(1)" :class="logintype == 1 ? 'activelogin':''">密码登录<text class="x"  v-if="logintype == 1"></text></view>
			<view class="ideeach" @click="logintypefun(2)" :class="logintype == 2 ? 'activelogin':''">验证码登录<text class="x" v-if="logintype == 2"></text></view>
		</view>
		<view class="mian-main marginAuto">
			<view class="item marginAuto">
				<view class="item-main marginAuto">
					<view class="item-title clearfix">
						<image class="fl" style="width:28rpx;height: 32rpx;margin-top:25rpx;" src="@/static/icon/phone.png" mode=""></image>
					</view>
					<input type="text" name="phone" maxlength="11" v-model="phone" placeholder="请输入手机号">
				</view>
			</view>
			<view class="item marginAuto" style="margin-top:20rpx;" v-if="logintype == 1">
				<view class="item-main marginAuto">
					<view class="item-title clearfix">
						<image class="fl" style="width:28rpx;height: 32rpx;margin-top:25rpx;" src="@/static/icon/pass.png" mode=""></image>
					</view>
					<input :type="ispass ? 'text':'password'" name="pass" v-model="pass" placeholder="请输入密码">
					<view class="item-title" @click="ispass = !ispass" style="display:inline-block;width:40rpx;height:40rpx;margin-top: 20rpx;">
						<uv-icon v-if="ispass" name="eye" size="22" color="#999999"></uv-icon>
						<uv-icon v-if="!ispass" name="eye-off-outline" size="22" color="#999999"></uv-icon>
					</view>
				</view>
			</view>
			<view class="item marginAuto" style="margin-top:20rpx;" v-if="logintype == 2">
				<view class="item-main marginAuto">
					<view class="item-title clearfix">
						<image class="fl" style="width:28rpx;height: 32rpx;margin-top:25rpx;" src="@/static/icon/code.png" mode=""></image>
					</view>
					<input type="text" name="veri" style="width:50%;" v-model="veri" placeholder="请输入验证码">
					<view class="each-code pull-right mainColor">
						<text class="each-code-y" v-if="!istime" @click="vericlick()">获取验证码</text>
						<text class="each-code-j" v-if="istime">{{times}}s</text>
					</view>
				</view>
			</view>
		</view>
		<view class="goreg marginAuto flex">
			<view v-if="idetype == 1" class="goregl" style="color:#999999;" @click="regfun()">还没有账号？<text class="mainColor">立即注册</text></view>
			<view v-if="idetype == 2"></view>
			<view class="goregr" :class="idetype == 2 ? 'mainColor':'goregrn'" @click="apifun.navigate('/pages/start/findpass')">忘记密码？</view>
		</view>
		<view class="marginAuto" style="width:600rpx;margin-top:100rpx;">
			<uv-button text="登录" @click="enter()" :customStyle="{
				'background':'#2340FF',
				'color':'#fff',
				'font-size':'30rpx',
				'width':'600rpx',
				'height':'100rpx',
				'border-radius':'20rpx'
			}"></uv-button>
		</view>
		
		<view class="agreement marginAuto">
			<view style="display:inline-block;position:relative;;top: 5rpx;" @click="isagreement=!isagreement">
				<uv-icon name="checkmark-circle-fill" :color="isagreement ? '#2340FF':'#999999'" size="20"></uv-icon>
			</view>
			<text @click="isagreement=!isagreement">我已阅读并同意</text>
			<text class="mainColor" @click="apifun.navigate('/pages/start/agreement')">《用户协议》</text>
		</view>
	</view>
</template>

<script>
	export default {
		data(){
			return {
				statusheadheight:uni.getStorageSync('ClientRectTop')+uni.getStorageSync('ClientRectHeight'),
				apifun:this.apifun,
				idetype:1,  //  1普通2审核
				logintype:1,  // 1密码 2验证码
				istime: false,
				times:60,
				phone: '',
				ispass:false,
				pass:'',
				veri: '',
				isagreement:false
			}
		},
		methods:{
			enter(){
				let sendData = {
					mobile:this.phone,
					password:this.pass,
					sms_code:this.veri,
					login_type:this.logintype,
					user_type:this.idetype,
				}
				if(!this.isagreement){
					this.apifun.toast('请先同意用户协议')
					return false
				};
				this.apifun.unirequest('/common/user/login','post',sendData,(res)=>{
					if(res.code === 200){
						let datas = res.data;
						uni.setStorageSync('token', datas.token);
						if(datas.choice_company){  // 选择企业
							this.apifun.navigate('/pages/start/selectenterprise')
						}else{
							if(this.idetype == 1){
								uni.reLaunch({
									url:'/pages/user/home'
								})
							}else{
								uni.reLaunch({
									url:'/pages/assesstab/home'
								})
							}
						}
					}else{
						this.apifun.toast(res.msg)
					}
				},false,true)
			},
			regfun(){
				uni.removeStorageSync('reginvoice');
				this.apifun.navigate('/pages/start/reg');
			},
			vericlick() {
				let that = this;
				let flag = true;
				if (that.apifun.testphone.test(that.phone) == false || that.phone == '') {
					that.apifun.toast("手机格式有误");
					return false
				};
				if (flag) {
					flag = false;
					let index = 60;
					that.istime = true;
					let time = setInterval(function() {
						if (index > 0) {
							--index;
							that.times = index;
						} else {
							index = 60;
							clearInterval(time)
							that.istime = false;
							flag = true;
						}
					}, 1000);
				}
				let sendData = {
					mobile: that.phone,
					type: '1'
				}
				that.apifun.unirequest(this.apifun.login_send_code, 'post', sendData, (res) => {
					if (res.code === 200) {
						let data = res.data;
						that.apifun.toast('发送成功；请注意查收');
					} else {
						that.apifun.toast(res.msg)
					}
				},false,true)
			},
			idetypefun(type){
				this.idetype = type
			},
			logintypefun(type){
				this.logintype = type
			}
		}
	}
</script>
<style scoped lang="scss">
	.topblock{
		position: sticky;
		height: 500rpx;
	}
	.loginbg{
		position: fixed;
		top: 0;
		left: 0;
		z-index: 0;
		width: 100%;
		height: 500rpx;
	}
	.topmain{
		position: relative;
		z-index: 10;
		margin-top: 16rpx;
		.logo{
			display: block;
			width: 100rpx;
			height: 100rpx;
			margin-left: 36rpx;
		}
		.companyname{
			font-size:36rpx;
			color: #333;
			margin-left: 36rpx;
			margin-top: 20rpx;
		}
		.idetype{
			width:450rpx;
			margin-top: 90rpx;
			justify-content: space-between;
			.ideeach{
				width: 140rpx;
				text-align: center;
				position: relative;
				font-size: 34rpx;
				color:#333333;
				line-height: 60rpx;
				.x{
					display: block;
					width: 140rpx;
					height:2px;
					border-radius:100rpx;
				}
			}
		}
	}
	.logintype{
		width:450rpx;
		margin-top:20rpx;
		justify-content: space-between;
		.ideeach{
			width: 150rpx;
			text-align: center;
			position: relative;
			font-size:28rpx;
			color:#666;
			line-height:50rpx;
			.x{
				display: block;
				width: 150rpx;
				height:2rpx;
				background-color:#333333;
				border-radius:100rpx;
			}
		}
		.activelogin{
			color:#333333
		}
	}
	/* input */
	.mian-main {
		width: 100%;
		margin-top:50rpx;
	}
	
	.item {
		padding: 10rpx 0;
	}
	
	.item-main {
		width: 610rpx;
		display: flex;
		height: 80rpx;
		line-height:80rpx;
		background-color: #F6F6F6;
		border-radius: 100rpx;
	}
	
	.item .item-title {
		display: inline-block;
		width: 40rpx;
		font-size: 30rpx;
		color: #333333;
		text-align: center;
		padding: 0 20rpx;
	}
	
	.item input {
		margin-left: 10rpx;
		width: 65%;
		height: 80rpx;
		line-height: 80rpx;
		font-size: 30rpx;
		color: #333333;
	}
	
	.passwordtext {
		line-height: 80rpx;
		margin-top: 80rpx;
	}
	
	.passwordtext-button {
		color: #8D8D97;
		font-size: 24rpx;
	}
	
	.each-code {
		height: 64rpx;
		line-height:64rpx;
		width: 160rpx;
		margin-top: 6rpx;
		text-align: center;
	}
	
	.each-code::before {
		display: inline-block;
		content: "";
		width: 1px;
		height: 20rpx;
		margin-right: 12rpx;
	}
	
	.each-code text {
		font-size: 26rpx;
		margin: 0;
	}
	// 
	.goreg{
		width:610rpx;
		justify-content: space-between;
		line-height: 60rpx;
		font-size:24rpx;
	}
	.agreement{
		width:610rpx;
		line-height:80rpx;
		color:#333333;
		font-size: 28rpx;
		text-align: center;
	}
	.goregrn{
		color: #999999;
	}
</style>
